<!DOCTYPE html>
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<script type="text/javascript" src="gallery/handlebars/2.0.0/handlebars.js"></script>
<script type="text/javascript" src="jquery/jquery/jquery.js"></script>
<script id="seajsnode" type="text/javascript" src="seajs/seajs/2.2.1/sea.js"></script>
</head>
<style type="text/css">
	*{
		margin: 0px; 
		padding: 0px;
	}
	.content{
		width:90%;
		margin: 15px auto;
	}
	.roomTitle{
		width:100%;
		font-size: 25px;
		text-align: center;
		margin:15px auto;
		line-height:1.5;
	}
	.printTime{
		width:100%;
		text-align:center;
		font-size:14px;
		text-align:right;
		line-height:1.5;
	}		
</style>
<body style='margin: 0px;padding: 0px;'>
	<div id="bs-example-navbar-collapse-1"></div>
	<script type="text/x-handlebars-template" id="template">
		<div class="content">
			<div class="roomTitle">
				<p>杭州千岛湖疗养中心</p>
				<p>客房中心房间状态报表</p>
			</div>			
    		<div>
				<table id="roomState" style='width:100%;border-collapse:collapse;' border='1'>
					<thead>
						<tr>
                			<td align='center' style='width:12.5%;'><font size='1' face="黑体">房号</font></td>
							<td align='center' style='width:12.5%;'><font size='1' face="黑体">房型</font></td>
                			<td align='center' style='width:12.5%;'><font size='1' face="黑体">房间状态</font></td>
                			<td align='center' style='width:12.5%;'><font size='1' face="黑体">名字</font></td>
							<td align='center' style='width:12.5%;'><font size='1' face="黑体">联系电话</font></td>
                			<td align='center' style='width:12.5%;'><font size='1' face="黑体">到日</font></td>
							<td align='center' style='width:12.5%;'><font size='1' face="黑体">离日</font></td>
                			<td align='center' style='width:12.5%;'><font size='1' face="黑体">理由</font></td>
            			</tr>
					</thead>
					<tbody>
						{{#each this}}
						<tr>
							<td align='center' style='width:12.5%;'><font size='1' face="黑体">{{this.code}}</font></td>
                			<td align='center' style='width:12.5%;'><font size='1' face="黑体">{{this.roomTypeName}}</font></td>
							<td align='center' style='width:12.5%;'><font size='1' face="黑体">{{this.status}}</font></td>
                			<td align='center' style='width:12.5%;'><font size='1' face="黑体">{{this.perName}}</font></td>
							<td align='center' style='width:12.5%;'><font size='1' face="黑体">{{this.phone}}</font></td>
                			<td align='center' style='width:12.5%;'><font size='1' face="黑体">{{this.checkInDate}}</font></td>
							<td align='center' style='width:12.5%;'><font size='1' face="黑体">{{this.checkInDate}}</font></td>
                			<td align='center' style='width:12.5%;'><font size='1' face="黑体">{{this.description}}</font></td>
						</tr>
						{{/each}}
					</tbody>					
				</table>
    		</div>
		</div>
	</script>	
	<script type="text/javascript">
		function getQueryString(name){
	        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	        var r = window.location.search.substr(1).match(reg);  
	        var context = "";
	        if (r != null)
	            context = r[2];
	        reg = null;
	        r = null;
	        return context == null || context == "" || context == "undefined" ? "" : decodeURI(context);
	    }
		AutoPage = {
			    header: null,//页面顶部显示的信息
			    content: null,//页面正文TableID
			    footer: null,//页面底部
			    totalHeight: null,//总的高度
			    tableCss: null,//正文table样式
			    divID:null,//全文divID

			    init: function (header, content, footer,totalHeight,tableCss,divID) {
			        AutoPage.header = header;
			        AutoPage.content = content;
			        AutoPage.footer = footer;
			        AutoPage.totalHeight = totalHeight;
			        AutoPage.tableCss = tableCss;
			        AutoPage.divID = divID;
			        //初始化分页信息
			         AutoPage.initPageSingle();
			        //隐藏原来的数据
			        AutoPage.hidenContent();
			        //开始分页
			        //AutoPage.beginPage();

			    },
			    //分页 重新设定HTML内容(单行)
			    initPageSingle: function () {

			        var tmpRows = $("#" + AutoPage.content)[0].rows; //表格正文
			        var height_tmp = 0; //一页总高度
			        var html_tmp = "";  //临时存储正文
			        var html_header = "<table class='"+AutoPage.tableCss+"'>";
			        var html_foot = "</table>";
			        var page = 0; //页码

			        var tr0Height = tmpRows[0].clientHeight; //table标题高度
			        var tr0Html =  "<tr>" + tmpRows[0].innerHTML + "</tr>";//table标题内容
			        height_tmp = tr0Height;
			        for (var i = 1; i < tmpRows.length ; i++) {
			            var trHtmp = tmpRows[i].clientHeight;//第i行高度
			            var trMtmp = "<tr>" + tmpRows[i].innerHTML + "</tr>";//第i行内容

			            height_tmp += trHtmp;
			            if (height_tmp < AutoPage.totalHeight) {
			                if (height_tmp == tr0Height + trHtmp) {
			                    html_tmp += AutoPage.header + html_header + tr0Html;
			                    page++;//页码
			                }
			                html_tmp += trMtmp;
			                if (i == tmpRows.length - 1) {
			                    html_tmp += html_foot + AutoPage.footer;
			                }
			            }
			            else {
			                html_tmp += html_foot + AutoPage.footer + AutoPage.addPageBreak();
			                i--;
			                height_tmp = tr0Height;
			            }
			        }

					
			        $("#" + AutoPage.divID).html(html_tmp);

			        var tdpagecount = $("*[name='tdPageCount']");//document.getElementsByName("tdPageCount");
			        for (var i = 0; i < tdpagecount.length; i++) {
			            tdpagecount[i].innerText = (i + 1) + "/" + page;
			        }

			    },

			    //隐藏原来的数据
			    hidenContent: function () {
			        $(AutoPage.header).hide();
			        $(AutoPage.content).hide();
			        $(AutoPage.footer).hide();
			    },    
			    ////添加分页符
			    addPageBreak: function () {
			        return "<p style='page-break-before:always;'></p>";
			    },
			    
			};
		seajs.use('moment/moment-2.9.0.js',function(moment){
   			var print = getQueryString("print");
   			$.ajax({
				url:"api/roomregister/printroom",				
				dataType:"json",
				success:function(data){
					var result = [];
	   				for(var i=0;i<data.length;i++){
	   					var roomObj = {};
	   					if(data[i].status == "Clear"){
	   						data[i].status = "净房"
	   					}else if(data[i].status == "Dirty"){
	   						data[i].status = "脏房"
	   					}else if(data[i].status == "CheckIn"){
	   						data[i].status = "在住房"
	   					}else if(data[i].status == "WillGo"){
	   						data[i].status = "将走房"
	   					}else if(data[i].status == "Appoint"){
	   						data[i].status = "预定"
	   					}else if(data[i].status == "Repairing"){
	   						data[i].status = "维修房"
	   					}else if(data[i].status == "Temporary"){
	   						data[i].status = "临时态"
	   					}else if(data[i].status == "SelfUse"){
	   						data[i].status = "自用房"
	   					}else if(data[i].status == "Free"){
	   						data[i].status = "免费房"
	   					}
	   					if(data[i].checkInDate){
	   						data[i].checkInDate = moment(data[i].checkInDate).format("YYYY-MM-DD");
	   					}
	   					if(data[i].checkOutDate){
	   						data[i].checkOutDate = moment(data[i].checkOutDate).format("YYYY-MM-DD");
	   					}
	   				}
	   				var template = $("#template").text();
	   				$("#bs-example-navbar-collapse-1").html(Handlebars.compile(template)(data)); 
	   				if(print == "print"){
	   					AutoPage.init(null, 'roomState', null, 370, null, "");
	   					window.print();
	   				}
				}
			}); 
		});
    </script>
</body>
</html>